<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>LocalVideo</title>

    <style>
        .container {
            justify-content: center;
            width: 1100px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            margin: 50px, 50px;
        }

        .container .title {
            padding-bottom: 0.3rem
            border-bottom: 1px solid #eaecef;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">LocalVideo</h1>
        <div>
            <input type="file" id="id-file" value="选择文件">
            <button type="button" id="upload">上传</button>
        </div>
        <div>
            <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
        </div>
        <ul id="video-list"></ul>
    </div>
<script>
var button = document.querySelector("#upload");
var input = document.querySelector("#id-file");
var upload = function() {
    if (input.files.length === 0) {
        console.log("未选择文件");
        return;
    }

    var formData = new FormData();
    var file = input.files[0];
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload/js");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.upload.onprogress = progressFunction;
    xhr.onload = uploadComplete;
    xhr.onerror =  uploadFailed;

    xhr.send(formData);
};


button.addEventListener("click", upload, false);

function progressFunction(evt) {
    var progressBar = document.getElementById("progressBar");
    if (evt.lengthComputable) {
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
    }
}

 function uploadComplete(evt) {
    alert("上传成功！");
    fetchVideos();
}

 function uploadFailed(evt) {
    alert("上传失败！");
    var progressBar = document.getElementById("progressBar");
    progressBar.value = 0;
}

function deleteAllLiChild(ul) {
    var child = ul.lastElementChild;
    while (child) {
        ul.removeChild(child);
        child = ul.lastElementChild;
    }
}

function fetchVideos() {
    var ul = document.querySelector("#video-list");

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/videos");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            deleteAllLiChild(ul);
            var result = JSON.parse(xhr.response);
            var items = result["items"];
            for (var i = 0;i < items.length;i++) {
                console.log(items[i]);
                var filePath = items[i];
                var subStrs = filePath.split('/');
                var fileName = subStrs[subStrs.length - 1];
                var li = document.createElement("li");
                li.innerHTML = fileName;
                ul.appendChild(li);
            }   
        }
    };
    xhr.send(null);
}
fetchVideos();
</script>
</body>
</html>
